<template>
	<view class="my_container">
		<CustomNavbarTwo title="搜索" />
		<view class="header">
			<view class="input-wrap">
				<u--input @confirm="handleConfirm" v-model="keyWord" border="none" prefixIcon="search"
					prefixIconStyle="font-size: 22px;color: #909399" shape="circle" placeholder="请输入内容"
					clearable></u--input>
			</view>
			<view @tap="handleCancel" class="btn">取消</view>
		</view>
		<view class="list-wrap">
			<view class="show-items">
				<view class="show-items-title">
					<view class="show-items-title-one">废纸最新供求资源</view>
				</view>
				<view class="show-items-item" v-for="(item, index) in wastePaperList" :key="item.id"
					@tap="gotoDetail(item.id)">
					<view class="show-items-item-left">
						<image class="show-items-item-image" :src="item.picUrl"></image>
						<view class="show-items-item-image-bontton">
							<image src="../../static/images/time.png"></image>
							<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}</view>
						</view>
					</view>
					<view class="show-items-item-right">
						<view class="show-items-item-right-one">
							<view :class="[item.resourceType == '1' ? 'active' : '']">
								{{ item.resourceType == '1' ? '出售' : '采购' }}
							</view>
							<view style="font-weight: 600">{{ item.title }}</view>
						</view>
						<view class="show-items-item-right-two">
							{{ item.pubContent }}
						</view>
						<view class="show-items-item-right-four">
							<image src="../../static/images/location.png"></image>
							<view>{{ item.province }}&nbsp;{{ item.city }}</view>
							<view>￥{{ item.price ? item.price : '电议' }}</view>
						</view>
						<view class="show-items-item-right-five">
							<image :src="item.briefUserInfo.avatar"></image>
							<view>{{ item.briefUserInfo.nickName }}</view>
							<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
						</view>
						<view class="show-items-item-right-six">
							<view class="one b-btn">
								<image mode="widthFix" class="b-img" src="../../static/images/view.png"></image>
								<view class="b-count">
									{{ item.viewCount == null ? 0 : item.viewCount }}
								</view>
							</view>
							<view @tap.stop="handleCollect(item, index)" class="two b-btn">
								<image v-if="item.collectFlag == '0'" class="b-img"
									src="../../static/images/collect.png"></image>
								<image v-else class="b-img" src="../../static/images/like1.png" />
								<view class="b-count">
									{{ item.collectCount == null ? 0 : item.collectCount }}
								</view>
							</view>
							<view class="three b-btn">
								<image class="b-img" src="../../static/images/message.png"></image>
								<view class="b-count">
									{{ item.commentCount == null ? 0 : item.commentCount }}
								</view>
							</view>
							<view class="four b-btn">
								<image class="b-img" src="../../static/images/zhaunfa.png"></image>
								<button class="share-btn" open-type="share" @tap.stop>分享
									{{ item.shareCount == null ? 0 : item.shareCount }}</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="show-items">
				<view class="show-items-title">
					<view class="show-items-title-one" @click="goSelect(1)">废塑最新供求资源</view>
				</view>
				<view class="show-items-item" v-for="(item, index) in wastePlasticList" :key="item.id"
					@tap="gotoDetail(item.id)">
					<view class="show-items-item-left">
						<image class="show-items-item-image" :src="item.picUrl"></image>
						<view class="show-items-item-image-bontton">
							<image src="../../static/images/time.png"></image>
							<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}</view>
						</view>
					</view>
					<view class="show-items-item-right">
						<view class="show-items-item-right-one">
							<view :class="[item.resourceType == '1' ? 'active' : '']">
								{{ item.resourceType == '1' ? '出售' : '采购' }}
							</view>
							<view style="font-weight: 600">{{ item.title }}</view>
						</view>
						<view class="show-items-item-right-two">
							{{ item.pubContent }}
						</view>
						<view class="show-items-item-right-four">
							<image src="../../static/images/location.png"></image>
							<view>{{ item.province }}&nbsp;{{ item.city }}</view>
							<view>￥{{ item.price ? item.price : '电议' }}</view>
						</view>
						<view class="show-items-item-right-five">
							<image :src="item.briefUserInfo.avatar"></image>
							<view>{{ item.briefUserInfo.nickName }}</view>
							<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
						</view>
						<view class="show-items-item-right-six">
							<view class="one b-btn">
								<image mode="widthFix" class="b-img" src="../../static/images/view.png"></image>
								<view class="b-count">
									{{ item.viewCount == null ? 0 : item.viewCount }}
								</view>
							</view>
							<view @tap.stop="handleCollect(item, index)" class="two b-btn">
								<image v-if="item.collectFlag == '0'" class="b-img"
									src="../../static/images/collect.png"></image>
								<image v-else class="b-img" src="../../static/images/like1.png" />
								<view class="b-count">
									{{ item.collectCount == null ? 0 : item.collectCount }}
								</view>
							</view>
							<view class="three b-btn">
								<image class="b-img" src="../../static/images/message.png"></image>
								<view class="b-count">
									{{ item.commentCount == null ? 0 : item.commentCount }}
								</view>
							</view>
							<view class="four b-btn">
								<image class="b-img" src="../../static/images/zhaunfa.png"></image>
								<button class="share-btn" open-type="share" @tap.stop>分享
									{{ item.shareCount == null ? 0 : item.shareCount }}</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="show-items">
				<view class="show-items-title">
					<view class="show-items-title-one" @click="goSelect(3)">设备最新供求资源</view>
				</view>
				<view class="show-items-item" v-for="(item, index) in deviceList" :key="item.id"
					@tap="gotoDetail(item.id)">
					<view class="show-items-item-left">
						<image class="show-items-item-image" :src="item.picUrl"></image>
						<view class="show-items-item-image-bontton">
							<image src="../../static/images/time.png"></image>
							<view>{{ item.createTime.substring(0, 10).replace('-', '.').replace('-', '.') }}</view>
						</view>
					</view>
					<view class="show-items-item-right">
						<view class="show-items-item-right-one">
							<view :class="[item.resourceType == '1' ? 'active' : '']">
								{{ item.resourceType == '1' ? '出售' : '采购' }}
							</view>
							<view style="font-weight: 600">{{ item.title }}</view>
						</view>
						<view class="show-items-item-right-two">
							{{ item.pubContent }}
						</view>
						<view class="show-items-item-right-four">
							<image src="../../static/images/location.png"></image>
							<view>{{ item.province }}&nbsp;{{ item.city }}</view>
							<view>￥{{ item.price ? item.price : '电议' }}</view>
						</view>
						<view class="show-items-item-right-five">
							<image :src="item.briefUserInfo.avatar"></image>
							<view>{{ item.briefUserInfo.nickName }}</view>
							<view style="color: #333">{{ item.briefUserInfo.vipTypeName }}</view>
						</view>
						<view class="show-items-item-right-six">
							<view class="one b-btn">
								<image mode="widthFix" class="b-img" src="../../static/images/view.png"></image>
								<view class="b-count">
									{{ item.viewCount == null ? 0 : item.viewCount }}
								</view>
							</view>
							<view @tap.stop="handleCollect(item, index)" class="two b-btn">
								<image v-if="item.collectFlag == '0'" class="b-img"
									src="../../static/images/collect.png"></image>
								<image v-else class="b-img" src="../../static/images/like1.png" />
								<view class="b-count">
									{{ item.collectCount == null ? 0 : item.collectCount }}
								</view>
							</view>
							<view class="three b-btn">
								<image class="b-img" src="../../static/images/message.png"></image>
								<view class="b-count">
									{{ item.commentCount == null ? 0 : item.commentCount }}
								</view>
							</view>
							<view class="four b-btn">
								<image class="b-img" src="../../static/images/zhaunfa.png"></image>
								<button class="share-btn" open-type="share" @tap.stop>分享
									{{ item.shareCount == null ? 0 : item.shareCount }}</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="show" style="height: 70rpx; line-height: 70rpx; width: 100%">
			<u-loadmore icon :status="status" />
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				keyWord: '',
				status: 'loading',
				pageSize: 5,
				pageNum: 1,
				total: 0,
				show: true,
				bannerList: [],
				dataList: [],
				wastePaperList: [],
				wastePlasticList: [],
				deviceList: [],
				shadowStyle: {
					backgroundImage: 'none',
					paddingTop: '0',
					marginTop: '20rpx'
				},
				showSex: false
			};
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if (this.total == this.wastePaperList.length + this.wastePlasticList.length + this.deviceList.length) {
				this.status = 'nomore';
				this.show = true;
				return;
			}
			this.show = true;
			this.pageNum++;
			this.getList();
		},
		methods: {
			handleConfirm() {
				this.getList();
			},
			//取消
			handleCancel() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '/page/detail/index?id=' + id
				});
			},
			//获取列表
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				const query = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					keyWord: this.keyWord,
					checkStatus: 2
				};
				this.$https.post(this.$api.getThreeData, query).then((res) => {
					if (res.code === 200) {
						if (this.pageNum == 1) {
							this.wastePaperList = [];
							this.wastePlasticList = [];
							this.deviceList = [];
						}
						const data = res.data;
						this.total = data.deviceListTotal + data.wastePaperListTotal + data.wastePlasticListTotal;
						this.wastePaperList = [...this.wastePaperList, ...data.wastePaperList];
						this.wastePlasticList = [...this.wastePlasticList, ...data.wastePlasticList];
						this.deviceList = [...this.deviceList, ...data.deviceList];
						uni.hideLoading();
						console.log(this.total);
						console.log(this.wastePaperList.length + this.wastePlasticList.length + this.deviceList
							.length, 44);
						if (this.total == 0 || this.total == this.wastePaperList.length + this.wastePlasticList
							.length + this.deviceList.length) {
							this.status = 'nomore';
							this.show = true;
						} else {
							this.show = false;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			},
			getData() {
				const query = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					keyWord: this.keyWord,
					checkStatus: 2
				};
				this.$https.get(this.$api.pubInfoPage, query).then((res) => {
					if (res.code === 200) {
						if (this.pageNum == 1) {
							this.itemList = [];
						}
						const data = res.data;
						this.total = res.total;
						this.itemList = [...this.itemList, ...res.rows];
						if (this.total == 0) {
							this.status = 'nomore';
							this.show = true;
						} else {
							this.show = false;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			},
			//点赞
			handleCollect(item, index) {
				this.$https.post(this.$api.getCourseLike, {
					pubInfoId: item.id,
					operateType: 1,
					processType: item.collectFlag == 0 ? 1 : 0
				}).then((res) => {
					if (res.code === 200) {
						this.getList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/page/zaishengziyuan/detail?id=${id}`
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;
		height: 100%;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 30rpx;

		.header {
			padding-top: 196rpx;
			display: flex;
			align-items: center;
			width: calc(100% - 30rpx);
			position: fixed;
			background-color: #fff;
			z-index: 9;

			.input-wrap {
				flex: 1;

				::v-deep .u-input {
					padding: 10rpx 20rpx !important;
					background-color: #f6f6f6;
				}
			}

			.btn {
				width: 120rpx;
				text-align: center;
				color: #989898;
			}
		}

		.list-wrap {
			margin-top: 300rpx;
			padding-bottom: 40rpx;

			.show-items {
				margin-top: 46rpx;
				width: 100%;

				.show-items-title {
					display: flex;
					height: 50rpx;
					width: 686rpx;

					.show-items-title-one {
						width: 584rpx;
						height: 50rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 600;
						font-size: 36rpx;
						color: #333333;
						line-height: 50rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.show-items-title-two {
						width: 70rpx;
						height: 40rpx;
						margin-top: 5rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #777777;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.show-items-title-three {
						width: 32rpx;
						height: 32rpx;
						margin-top: 9rpx;
					}
				}

				.show-items-item {
					width: 686rpx;
					height: 322rpx;
					background: #ffffff;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-top: 20rpx;
					display: flex;

					.show-items-item-left {
						.show-items-item-image {
							width: 212rpx;
							height: 224rpx;
							margin-top: 28rpx;
							margin-left: 20rpx;
							border-radius: 24rpx;
						}

						.show-items-item-image-bontton {
							height: 70rpx;
							width: 212rpx;
							margin-left: 20rpx;
							display: flex;
							margin-top: 20rpx;

							image {
								width: 36rpx;
								height: 36rpx;
							}

							view {
								width: 128rpx;
								height: 36rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
								line-height: 36rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-left: 4rpx;
							}
						}
					}

					.show-items-item-right {
						margin-left: 20rpx;
						height: 322rpx;

						.show-items-item-right-one {
							display: flex;
							align-items: center;

							:nth-child(1) {
								width: 72rpx;
								height: 40rpx;
								line-height: 40rpx;
								background-color: #556983;
								border-radius: 10rpx;
								margin-top: 38rpx;
								margin-right: 10rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 18rpx;
								color: #fff;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}

							.active {
								width: 72rpx;
								height: 40rpx;
								line-height: 40rpx;
								background-color: #4fe200;
								border-radius: 10rpx;
								margin-top: 38rpx;
								margin-right: 10rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 18rpx;
								color: #fff;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}

							:nth-child(2) {
								margin-top: 38rpx;
								width: 340rpx;
								height: 40rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								line-height: 39rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}

						.show-items-item-right-two {
							width: 414rpx;
							height: 68rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #333;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 10rpx;
							overflow: hidden;
							/* 确保超出部分的文本会被隐藏 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							display: -webkit-box;
							/* 使用弹性盒子模型 */
							-webkit-line-clamp: 2;
							/* 限制显示两行 */
							-webkit-box-orient: vertical;
							/* 垂直排列子元素 */
						}

						.show-items-item-right-four {
							display: flex;
							width: 414rpx;
							height: 44rpx;

							image {
								width: 24rpx;
								height: 26rpx;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								margin-top: 9rpx;
							}

							:nth-child(2) {
								flex: 1;
								height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #333;
								line-height: 44rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								padding-left: 4rpx;
							}

							:nth-child(3) {
								width: 180rpx;
								height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 600;
								font-size: 24rpx;
								color: #ff4400;
								line-height: 44rpx;
								text-align: right;
								font-style: normal;
								text-transform: none;
							}
						}

						.show-items-item-right-five {
							display: flex;
							width: 414rpx;
							height: 44rpx;

							image {
								width: 40rpx;
								height: 40rpx;
								margin-top: 2rpx;
								border-radius: 24rpx 24rpx 24rpx 24rpx;
							}

							:nth-child(2) {
								width: 220rpx;
								line-height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
								line-height: 44rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								padding-left: 10rpx;
							}

							:nth-child(3) {
								width: 154rpx;
								line-height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 20rpx;
								color: #ff4400;
								line-height: 44rpx;
								text-align: right;
								font-style: normal;
								text-transform: none;
							}
						}

						.show-items-item-right-six {
							padding-left: 10rpx;
							height: 40rpx;
							width: 414rpx;
							display: flex;
							justify-content: space-between;
							margin-top: 30rpx;
							line-height: 40rpx;

							.b-btn {
								display: flex;

								.b-img {
									width: 40rpx;
									height: 40rpx;
								}

								.b-count {
									margin-left: 4rpx;
									font-size: 24rpx;
								}
							}

							.four {
								width: 120rpx;
								position: relative;

								.b-img {
									width: 40rpx;
									height: 36rpx;
									// z-index: 22;
								}

								.share-btn {
									background-color: transparent;
									padding-left: 40rpx;
									position: absolute;
									font-size: 22rpx;
									line-height: 37rpx;
									top: 0;
								}
							}

							.show-items-item-right-six-image1 {
								width: 50rpx;
								height: 32rpx;
								margin-top: 1rpx;
							}

							.show-items-item-right-six-view1 {
								width: 100rpx;
								height: 40rpx;
								line-height: 34rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 26rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								padding-left: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>